<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易概况</span>
      </div>
      <el-row :gutter="20" class="cardStyle">
        <el-col :span="12" class="mr_vertical_10" v-for="(item, idx) of data" :key="idx">
          <el-card shadow="never">
            <el-row type="flex" justify="center" align="middle">
              <el-row>
                <el-row class="title" type="flex" justify="center">
                  <span class="fontStyle">{{ item.name }}</span>
                </el-row>
                <el-row type="flex" justify="center">
                  <span class="numberStyle">{{ item.data }}</span>
                </el-row>
              </el-row>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected situationData: any = {
    trade_interval: null,
    avg_price: null,
    total_qty: null,
    total_amt: null
  };
  protected data: any = [
    { name: "交易次数(次)", type: 0, data: 0 },
    { name: "平均价格(元)", type: 1, data: 0 },
    { name: "交易数量(度)", type: 2, data: 0 },
    { name: "交易总额(元)", type: 3, data: 0 }
  ];
  protected loading: boolean = false;

  @Watch("situationData", { deep: true })
  protected async init() {
    this.data.forEach((el: any) => {
      if (el.type === 0) {
        el.data = this.situationData.total_order_qty;
      } else if (el.type === 1) {
        el.data = Vue.prototype.$coinToYuan(this.situationData.avg_price);
      } else if (el.type === 2) {
        el.data = this.situationData.total_qty;
      } else if (el.type === 3) {
        el.data = Vue.prototype.$coinToYuan(this.situationData.total_amt);
      }
    });
  }
  protected formatNumber(num: any) {
    if (isNaN(num)) {
      throw new TypeError("num is not a number");
      return;
    }
    return ("" + num).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 15px 0;
}
.cardBox {
  height: 525px;
  overflow: hidden;
}
.cardStyle {
  /deep/.el-card {
    background: rgba(7, 123, 232, 0.05);
    .el-card__header {
      padding: 30px 0 35px 0;
      font-size: 22px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #1a173b;
    }
    .el-card__body {
      padding: 30px 0;
      .title {
        margin-bottom: 20px;
      }
    }
    .fontStyle {
      color: #077be8;
      font-size: 24px;
      line-height: 50px;
    }
    .numberStyle {
      font-size: 36px;
      margin-top: 10px;
    }
  }
}
</style>


